import React, {Component} from 'react';
import {incrementAction,decrementAction,incrementAsyncAction} from '../../redux/actions/count'
//引入connect连接CountUi组件和redux
import {connect} from 'react-redux'

class Count extends Component {


    // 加
    increment=()=>{
        const {incrementAction}=this.props
        const {value}=this.selectNum
        incrementAction(value)

    }
    // 减
    decrement=()=>{
        const {decrementAction}=this.props
        const {value}=this.selectNum
        decrementAction(value)

    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {count}=this.props
        if(count%2!==0){
            const {incrementAction}=this.props
            const {value}=this.selectNum
            incrementAction(value)
        }

    }
    // 异步加
    incrementAsync=()=>{
        const {incrementAsyncAction}=this.props
        const {value}=this.selectNum
        incrementAsyncAction(value,1000)

    }

    render() {
        const {count,length}=this.props
        return (
            <div>
                <h1>我是Count组件，当前求和为:{count}。Person组件的人数为:{length}</h1>
                <select ref={c=>this.selectNum=c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.increment}>+</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.incrementIfOdd}>奇数再+</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.incrementAsync}>异步+</button>
            </div>

        );
    }
}

export default connect(
    state=>{
        return{
            count:state.count,
            length:state.persons.length
        }
    },
    {
        incrementAction,
        decrementAction,
        incrementAsyncAction
    }
)(Count)